<template>
  <div>

    <div class="a">
      <div style="text-align: center">

        <img alt="知乎 LOGO"  width="158px" class="SignFlowHomepage-logo" src="https://pic2.zhimg.com/80/v2-f6b1f64a098b891b4ea1e3104b5b71f6_720w.png"></div>

      <div class="b">

        <form action="" class="login-content">

          <br>
          <svg @click="home" style="margin-top: -21px;
    margin-left: 299px;" width="52" height="52" fill="none"><mask id="id-320414155-a" width="52" height="52" x="0" y="0" maskUnits="userSpaceOnUse"><path fill="#fff" d="M0 0l52 52V0H0z"></path></mask><g mask="url(#id-320414155-a)"><path fill="#06F" d="M0 0l52 52V0H0z"></path><path fill="#fff" d="M22.125 4h13.75A4.125 4.125 0 0140 8.125v27.75A4.125 4.125 0 0135.875 40h-13.75A4.125 4.125 0 0118 35.875V8.125A4.125 4.125 0 0122.125 4zm6.938 34.222c1.139 0 2.062-.945 2.062-2.11 0-1.167-.923-2.112-2.063-2.112-1.139 0-2.062.945-2.062 2.111 0 1.166.923 2.111 2.063 2.111zM21 8.333v24h16v-24H21z" fill-rule="evenodd" clip-rule="evenodd"></path><path fill="#fff" d="M46.996 15.482L39 19.064l-7.996-3.582A1.6 1.6 0 0132.6 14h12.8a1.6 1.6 0 011.596 1.482zM47 16.646V24.4a1.6 1.6 0 01-1.6 1.6H32.6a1.6 1.6 0 01-1.6-1.6v-7.754l8 3.584 8-3.584z" fill-rule="evenodd" clip-rule="evenodd"></path><path fill="#06F" d="M31 15.483v1.17l8 3.577 8-3.577v-1.17l-8 3.581-8-3.581z"></path></g></svg><h2 style="text-align: center;margin-top: -15px">扫码登录</h2>
          <div class="Qrcode-img">
            <img  @mouseover="a=2" @mouseleave="a=1"  class="Qrcode-qrcode" width="150" height="150" src="../assets/img/image.png" alt="二维码">
          <span v-if="a==2" style="position: relative;   top: 22px; right: 8px;">            <img width="40%" alt="使用手机知乎 APP，打开我的页面，点击左上角扫一扫，可以扫描本页的二维码" class="Qrcode-tips" src="https://pic1.zhimg.com/80/v2-3ca9dfefdc7ab9034c123abd69a57ae0.png"></span>
          </div>
          <div class="Qrcode-guide-message"><p>打开<a href="https://www.zhihu.com/app/" target="_blank" rel="noopener noreferrer"> 知乎 App</a></p><p>在「我的」页面顶部打开扫一扫</p><p>如扫码异常请下载最新版客户端</p></div>

          <span style="font-size: 15px;color: rgb(133, 144, 166);">社交帐号登录</span>
         <span class="box1"  style="margin-left: 60px">
      <button style="display: inline-block" type="button" class="Button Login-socialButton Button--plain">

        <svg class="" fill="#60c84d" viewBox="0 0 24 24" width="20" height="20">

          <path d="M2.224 21.667s4.24-1.825 4.788-2.056C15.029 23.141 22 17.714 22 11.898 22 6.984 17.523 3 12 3S2 6.984 2 11.898c0 1.86.64 3.585 1.737 5.013-.274.833-1.513 4.756-1.513 4.756zm5.943-9.707c.69 0 1.25-.569 1.25-1.271a1.26 1.26 0 0 0-1.25-1.271c-.69 0-1.25.569-1.25 1.27 0 .703.56 1.272 1.25 1.272zm7.583 0c.69 0 1.25-.569 1.25-1.271a1.26 1.26 0 0 0-1.25-1.271c-.69 0-1.25.569-1.25 1.27 0 .703.56 1.272 1.25 1.272z" fill-rule="evenodd">
          </path>
        </svg>微信</button>
        <button type="button" class="Button Login-socialButton Button--plain">
          <svg class="Zi Zi--QQ Login-socialIcon" fill="#50c8fd" viewBox="0 0 24 24" width="20" height="20"><path d="M12.003 2c-2.265 0-6.29 1.364-6.29 7.325v1.195S3.55 14.96 3.55 17.474c0 .665.17 1.025.281 1.025.114 0 .902-.484 1.748-2.072 0 0-.18 2.197 1.904 3.967 0 0-1.77.495-1.77 1.182 0 .686 4.078.43 6.29 0 2.239.425 6.287.687 6.287 0 0-.688-1.768-1.182-1.768-1.182 2.085-1.77 1.905-3.967 1.905-3.967.845 1.588 1.634 2.072 1.746 2.072.111 0 .283-.36.283-1.025 0-2.514-2.166-6.954-2.166-6.954V9.325C18.29 3.364 14.268 2 12.003 2z" fill-rule="evenodd"></path>
        </svg>QQ</button>
        <button type="button" class="Button Login-socialButton Button--plain">
          <svg class="Zi Zi--Weibo Login-socialIcon" fill="#fb6622" viewBox="0 0 24 24" width="20" height="20"><path fill="#FB6622" d="M15.518 3.06c8.834-.854 7.395 7.732 7.394 7.731-.625 1.439-1.673.309-1.673.309.596-7.519-5.692-6.329-5.692-6.329-.898-1.067-.029-1.711-.029-1.711zm4.131 6.985c-.661 1.01-1.377.126-1.376.126.205-3.179-2.396-2.598-2.396-2.598-.719-.765-.091-1.346-.091-1.346 4.882-.551 3.863 3.818 3.863 3.818zM5.317 7.519s4.615-3.86 6.443-1.328c0 0 .662 1.08-.111 2.797.003-.003 3.723-1.96 5.408.159 0 0 .848 1.095-.191 2.649 0 0 2.918-.099 2.918 2.715 0 2.811-4.104 6.44-9.315 6.44-5.214 0-8.026-2.092-8.596-3.102 0 0-3.475-4.495 3.444-10.33zm10.448 7.792s.232-4.411-5.71-4.207c-6.652.231-6.579 4.654-6.579 4.654.021.39.097 3.713 5.842 3.713 5.98 0 6.447-4.16 6.447-4.16zm-9.882.86s-.059-3.632 3.804-3.561c3.412.06 3.206 3.165 3.206 3.165s-.026 2.979-3.684 2.979c-3.288 0-3.326-2.583-3.326-2.583zm2.528 1.037c.672 0 1.212-.447 1.212-.998 0-.551-.543-.998-1.212-.998-.672 0-1.215.447-1.215.998 0 .551.546.998 1.215.998z" fill-rule="evenodd">
      </path></svg>
        微博</button>
      </span>
          <br>
          <div style="margin-top: 6px" class="css-1k01q48"><div class="css-1pysja1"><a href="/org/signup" data-za-detail-view-id="4943" class="css-jzr1wa"><span style="display: inline-flex; align-items: center;">​<svg class="Zi Zi--BadgeCert css-vfpo4o" fill="currentColor" viewBox="0 0 24 24" width="26" height="26"><g fill="none" fill-rule="evenodd"><path fill="#0F88EB" d="M2.64 13.39c1.068.895 1.808 2.733 1.66 4.113l.022-.196c-.147 1.384.856 2.4 2.24 2.278l-.198.016c1.387-.122 3.21.655 4.083 1.734l-.125-.154c.876 1.084 2.304 1.092 3.195.027l-.127.152c.895-1.068 2.733-1.808 4.113-1.66l-.198-.022c1.386.147 2.402-.856 2.279-2.238l.017.197c-.122-1.388.655-3.212 1.734-4.084l-.154.125c1.083-.876 1.092-2.304.027-3.195l.152.127c-1.068-.895-1.808-2.732-1.66-4.113l-.022.198c.147-1.386-.856-2.4-2.24-2.279l.198-.017c-1.387.123-3.21-.654-4.083-1.733l.125.153c-.876-1.083-2.304-1.092-3.195-.027l.127-.152c-.895 1.068-2.733 1.808-4.113 1.662l.198.02c-1.386-.147-2.4.857-2.279 2.24L4.4 6.363c.122 1.387-.655 3.21-1.734 4.084l.154-.126c-1.083.878-1.092 2.304-.027 3.195l-.152-.127z"></path><path fill="#FFF" d="M9.78 15.728l-2.633-2.999s-.458-.705.242-1.362c.7-.657 1.328-.219 1.328-.219l1.953 2.132 4.696-4.931s.663-.348 1.299.198c.636.545.27 1.382.27 1.382s-3.466 3.858-5.376 5.782c-.98.93-1.778.017-1.778.017z"></path></g></svg></span>开通机构号</a></div><div class="css-lbryw4"></div><div class="css-eow14e"><button class="css-hrpw2l"><span style="display: inline-flex; align-items: center;">​<svg width="20" height="20" viewBox="0 0 20 20" class="css-vfpo4o" fill="none"><path fill="url(#paint0_linear)" d="M16.131 0H3.87A3.869 3.869 0 000 3.869V16.13A3.869 3.869 0 003.869 20H16.13A3.869 3.869 0 0020 16.131V3.87A3.869 3.869 0 0016.131 0z"></path><path fill="#fff" d="M14.9 10.046V7.391l2.67-.137.232-.015c.147-.26.214-.559.192-.857-.02-.071-.059-.19-.178-.163a9.048 9.048 0 01-1.204.207c-.777.092-1.119.116-2.196.193-1.893.14-3.56.205-3.56.205a.722.722 0 00.75.724c.642-.027 1.582-.071 2.531-.119v2.617h-3.616a.753.753 0 00.753.754h2.843v2.008c0 .255-.13.341-.345.347h-1.1a1.187 1.187 0 00.632.742c.244.081.503.109.76.08.385-.02.836-.237.836-1.014V10.8h3.175a.362.362 0 00.361-.362v-.392H14.9z"></path><path fill="#fff" d="M12.414 8.251a.65.65 0 00-.908-.148l-.107.077 1.187 1.662.635-.457-.807-1.134zm4.147-.057l-.89 1.166.647.472 1.273-1.685-.107-.077a.653.653 0 00-.923.124zM9.737 7.031H6.263v6.065h.858l.112.732 1.154-.732h1.356L9.737 7.03zm-1.465 5.311l-.674.415-.065-.427h-.487V7.785h1.908v4.557h-.682zM5.637 9.761H4.379V7.785h1.436v-.368a.386.386 0 00-.383-.385h-2.24a115.436 115.436 0 01.347-1.018 1.187 1.187 0 00-.68.199.908.908 0 00-.385.551c-.151.416-.296.813-.368 1.05-.136.38-.466 1.048-.466 1.048.248-.002.493-.06.716-.169a1.205 1.205 0 00.575-.822c0-.027 0-.053.024-.086h.65V9.35c0 .142 0 .279-.018.412H2.433a.754.754 0 00-.754.754h1.837a4.955 4.955 0 01-.226 1.035 4.746 4.746 0 01-.845 1.484 9.363 9.363 0 01-.89.845 1.56 1.56 0 001.527-.27 4.21 4.21 0 00.908-1.623c.152-.483.258-.98.318-1.483h1.685v-.38a.362.362 0 00-.356-.362z"></path><path fill="#fff" d="M4.747 11.318l-.658.425 1.418 2.118a1.96 1.96 0 00.19-.629.908.908 0 00-.08-.617l-.87-1.297z"></path><defs><linearGradient id="paint0_linear" x1="-6.708" x2="25.504" y1="29.91" y2="-8.476" gradientUnits="userSpaceOnUse"><stop offset=".42" stop-color="#06F"></stop><stop offset=".92" stop-color="#00C4FF"></stop></linearGradient></defs></svg></span>下载知乎 App</button></div></div>

        </form>


      </div>

    </div>

  </div>
</template>

<script>
export default {
  name: "erweima",
  data(){
    return{
      a:1
    }
  },
  methods:{
    home(){
      this.$router.push('/')


    }
  }
}
</script>

<style scoped>
.a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-image: url('../assets/img/sign_bg.db29b0fb.png');
  background-repeat: no-repeat;
  background-color: #b8e5f8;
  background-size: cover;
  width: 100%;
  height: 100vh;
  overflow: auto;
}
.b{
  position: relative;
  overflow: hidden;
  width: 375px;
  height: 465px;
  margin-left: 38%;

}

.SignFlow-qrcodeTab svg {
  width: 100%;
  height: 100%;
  cursor: pointer;
  position: relative;
  top:  -467px;;
  left: 92%;
}
.login-content{
  padding: 0 24px 84px;
  text-align: center;
  background-color: #fff;
}
.SignFlow-tab {
  display: inline-block;
  text-align: left;
  padding: 16px 0px


}
.box1 button{
  margin-left: 5px;

}
.SignContainer-tip{
  padding-bottom: 10px;
  border-bottom: 1px solid #ebebeb;
}
a{
  text-decoration: none;
  color: rgb(133, 144, 166);
}
.Select-arrow {
  margin-left: 8px;
  position: relative;
  top: 8px;

}
.ss {
  height: 22px;
  margin: 0 12px;
  background: #ebebeb;
  padding: 1px;
}
.SignFlow-account {
  margin-top: 24px;
  border-bottom: 1px solid #ebebeb;
}
.Input {
  -webkit-box-flex: 1;
  -ms-flex: 1 1;
  flex: 1 1;
  padding-bottom: 7px;
  overflow: hidden;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  background: transparent;
  border: none;
  resize: none;
}
.SignFlowInput input.Input {
  height: 22px;
  width: 300px;
  border-bottom: 1px solid #ebebeb;

}
.Button--link, .Button--plain {
  height: auto;
  padding: 0;
  line-height: inherit;
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: #175199;
  margin-left: 210px;
}

input.Input {
  color: #121212;
  height: 24px;
  line-height: 24px;
  font-size: 10px;
}
.Button--primary.Button--blue {
  color: #fff;
  background-color: #06f;
}

.SignFlow-submitButton {
  width: 100%;
  margin-top: 30px;
  height: 36px;
}
.Button--blue {
  color: #06f;
  border-color: #06f;
}
.SignContainer-tip {
  font-size: 13px;
  color: rgb(133, 144, 166);
}

.css-1k01q48 {
  -webkit-box-sizing: border-box;
  font-size: 14px;
  box-sizing: border-box;
  padding-left: 27px;
  min-width: 0;
  margin-left: -25px;
  padding-right: 46px;
  color: #0066FF;
  width: 400px;
  height: 60px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #F6F6F6;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-between;

}

.css-hrpw2l {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  text-align: center;
  line-height: inherit;
  -webkit-text-decoration: none;
  text-decoration: none;
  font-size: inherit;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  color: white;
  background-color: #0066FF;
  border: 0;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  color: #FFFFFF;
  background-color: #0066FF;
  border-radius: 4px;
  background-color: unset;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  padding: 0;
}


</style>
